<template>
  <div>

    <div class="container">

      <van-icon name="arrow-left" @click="tohome()"/>
      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
      <center><h3>个人资料</h3></center>
    </div>

    <div class="avater">
      <van-uploader :after-read="toupload">
        &nbsp;&nbsp;&nbsp;头像&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <van-image class="avatar" round :src="user.headimg"/>&nbsp;
        >
      </van-uploader>
    </div>
    <van-field
        v-model="user.username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
        left-icon="user"
    >
      <template #button>
      </template>
    </van-field>
    <van-field
        v-model="user.individual"
        label="简介"
        placeholder="请输入简介"
    >
      <template #button>
      </template>
    </van-field>
    <div class="container">
      &nbsp;&nbsp;&nbsp;
      性别
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <van-radio-group v-model="user.sex" direction="horizontal">
        <van-radio name="男">男</van-radio>
        <van-radio name="女">女</van-radio>
      </van-radio-group>
    </div>
    <van-cell title="生日" is-link @click="ondatasel">
      {{ user.birthday }}
    </van-cell>
    <van-popup
        v-model:show="showBottom"
        position="bottom"
        :style="{ height: '30%' }"
    >
      <van-date-picker
          v-model="birthday"
          title="选择日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="toupdateuserbir"
          @cancel="toexituserbir"
      />
    </van-popup>

    <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="show = true"
    />

    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @finish="onFinish"
      />
    </van-popup>


    &nbsp;&nbsp;&nbsp;实名认证：
    <van-uploader :after-read="touploadimg" v-if="!user.Realname">
      <van-button icon="plus" type="primary" v-model="userheadimg">上传身份证图片</van-button>
    </van-uploader>
    <span v-if="user.Realname">{{ user.Realname }}</span>
    <br><br>
    &nbsp;&nbsp;&nbsp;<van-button type="primary" @click="touploaduser">确认</van-button>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
// import {showFailToast, showSuccessToast, showToast} from "vant";
import axios from "axios";
import {useRouter} from "vue-router";
import {useCascaderAreaData} from "@vant/area-data";
import {showSuccessToast} from "vant";

let router = useRouter()
let user = ref({
  'username': '张三',
  'individual': '',
  'headimg': 'http://localhost:8000/upload/userheadimg/defaultimg.jpg',
  'birthday': ['2000', '01', '01']
})
let userheadimg = ref('')
let showBottom = ref(false)
let birthday = ref([])
const show = ref(false);
const fieldValue = ref('');
const qntoken = ref('');
const cascaderValue = ref('');
const options = useCascaderAreaData();
let maxDate = new Date()
let minDate = new Date(1900, 1, 1)
let picurl = ref('')
const tohome = () => {
  router.push('/')
}

const onFinish = ({selectedOptions}) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join('/');
  user.value.address = fieldValue.value
};

const toupdateuserbir = () => {
  showBottom.value = false
  user.value.birthday = birthday.value[0] + '-' + birthday.value[1] + '-' + birthday.value[2]
}

const toupload = (file) => {
  let formData = new FormData()
  formData.append('file', file.file)
  axios.post('http://localhost:8000/user/uploaduserhead/', formData).then(res => {
    user.value.headimg = res.data
  })
}

const toexituserbir = () => {
  showBottom.value = false
  birthday.value = []
}

const getQiniuUploadToken = () => {
  axios.get('user/qn/').then(res => {
    qntoken.value = res.data.data
  })
}
// redis添加方法
const AddRedis = () => {
  // 将七牛云生成照片地址发送给后端
  axios.get(`user/addRedis/?url=` + picurl.value).then(res => {
    showSuccessToast(res.data.msg)
    // tobaidu(picurl.value)
    // 调用等待定时刷新方法
    getcardmes()
  })
}

// 休眠3秒后再跳用这个方法走百度接口实名认证
const getcardmes = () => {
  const t = setInterval(() => {
    axios.post('user/baidu/', {
      'id': localStorage.getItem('userid'),
      "url": picurl.value
    }).then(res => {
      showSuccessToast(res.data.msg)

      axios.get(`user/userID/?userid=${localStorage.getItem('userid')}`).then(res => {
        user.value.Realname = res.data.data.Realname
      })
      clearInterval(t)
    })
  }, 3000)
}
const touploadimg = (file) => {
  userheadimg.value = file.file.name
  const formData = new FormData();
  formData.append('token', qntoken.value);
  formData.append('file', file.file);
  //调用接口云服务器，本地
  axios.post("https://upload-z1.qiniup.com", formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
    //上传完成，调用存入redis的接口
    // tobaidu(res.data.key)
    // 将七牛云生成的图片赋值给自定义picurl变量
    picurl.value = "http://sq692xli5.hb-bkt.clouddn.com/" + res.data.key
    // 跳用redis添加方法
    AddRedis()

  })
}

// const tobaidu = (filename) => {
//   axios.post('user/baidu/', {
//     'id': localStorage.getItem('userid'),
//     "url": filename
//   }).then(res => {
//     showSuccessToast(res.data.msg)
//   })
// }

const ondatasel = () => {
  console.log(22)
  showBottom.value = true
}

const finduser = (id) => {
  axios.get(`user/userID/?userid=${id}`).then(res => {
    user.value = res.data.data
    fieldValue.value = res.data.data.address
  })
}

const touploaduser = () => {
  axios.put(`user/userID/?userid=${localStorage.getItem('userid')}`, user.value).then(res => {
    showSuccessToast(res.data.msg)
  })
}

onMounted(() => {
  let userid = localStorage.getItem('userid')
  finduser(userid)
  getQiniuUploadToken();
})
</script>
<style>
.container {
  display: flex;
  text-align: center;
  /* 以下是一些可选的 Flex 属性，可以根据需要调整 */
  align-items: center; /* 垂直居中 */
}

.avatar {
  width: 30px;
  align-items: center; /* 垂直居中 */
  height: 30px;
}

/* 样式穿透 */

</style>